import React, { useEffect } from 'react';
// import bgc from '@/assets/images/background.jpeg';
import { rgb } from '@/utils/color';

export default function Canvas() {
  useEffect(() => {
    const canvas = document.querySelector<HTMLCanvasElement>('#myCanvas')!;

    const app = canvas.getContext('2d')!;
    // // 矩形轮廓
    // app.strokeStyle = 'tomato';
    // app.lineWidth = 30;
    // app.lineJoin = 'round';
    // app.strokeRect(50, 50, 200, 200);

    // // 画圆
    // app.strokeStyle = 'skyblue';
    // app.lineWidth = 10;
    // app.beginPath();
    // app.arc(150, 150, 30, 0, Math.PI * 2);
    // app.stroke();
    // app.closePath();

    // // 不规则图形
    // app.beginPath();
    // app.moveTo(canvas.width / 2, 20);
    // app.lineTo(canvas.width / 2, canvas.height);
    // app.lineTo(canvas.width, canvas.height);
    // app.closePath();
    // app.fill();

    // 渐变色
    // const gradient = app.createLinearGradient(0, 0, 300, 300);
    // gradient.addColorStop(0, '#16a086');
    // gradient.addColorStop(0.5, '#e67e22');
    // gradient.addColorStop(1, '#9b59d6');

    // app.fillStyle = gradient;
    // app.fillRect(0, 0, 300, 300);

    // 字体填充
    // app.fillStyle = 'skyblue';
    // app.fillRect(0, 0, canvas.width, canvas.height);
    // app.fillStyle = 'red';
    // app.font = '30px STBaoliSC-Regular';
    // app.textBaseline = 'top';
    // app.fillText('Hello World', 50, 0);
    // app.strokeText('Hello World', 50, 0);

    // const img = document.createElement('img');
    // img.src = bgc;
    // img.onload = () => {
    //   // 贴图
    //   // const pattern = app.createPattern(img, 'repeat')!;
    //   // app.fillStyle = pattern;
    //   // app.fillRect(0, 0, 300, 300);
    //   // 图片绘制
    //   canvas.width = img.naturalWidth * scale(img, canvas);
    //   canvas.height = img.naturalHeight * scale(img, canvas);
    //   app.drawImage(img, 0, 0, canvas.width, canvas.height);
    // };

    app.fillStyle = '#000';
    app.fillRect(0, 0, canvas.width, canvas.height);

    // 随机方块
    // for (let i = 0; i < 1000; i++) {
    //   app.fillStyle = rgb();
    //   app.fillRect(Math.random() * canvas.width, Math.random() * canvas.height, 2, 2);
    // }

    // 随机圆
    for (let i = 0; i < 200; i++) {
      app.fillStyle = rgb();
      app.beginPath();
      app.arc(
        Math.random() * canvas.width,
        Math.random() * canvas.height,
        Math.random() * 30,
        0,
        Math.PI * 2,
      );
      app.fill();
    }
  }, []);

  // 计算缩放比
  // const scale = useCallback(
  //   (img: HTMLImageElement, el: HTMLCanvasElement) =>
  //     Math.min(el.width / img.naturalWidth, el.height / img.naturalHeight),
  //   [],
  // );

  return (
    <div>
      <canvas id="myCanvas" width="500" height="500" />
    </div>
  );
}
